<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>搜索“{{title}}”</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div v-for="item in contentList" :key="item.id"
               style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding: 8px 0">
            <div style="display: flex;align-items: center;">
              <i class="el-icon-caret-right" style="color: #999"></i>
              <div style="margin-left: 5px">
                <el-link @click="toContent(item)">{{ item.title }}</el-link>
              </div>
            </div>
            <div style="color: #999" v-text="item.releaseTime"></div>
          </div>
          <div>
            <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="totalPage"
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carouselWidth: 0,
      btnBG: '',
      menuId: '',
      menuList: [],
      menuInfo: '',
      contentList: [],
      categoryType: 0,
      categoryIdListStr: '',
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      subMenuId: '',
      subMenu: '',
      title: '',//参数
    }
  },
  activated() {
    this.title = this.$route.query.title
    if (this.title) {
      this.getContentList()
    }

  },
  methods: {
    toContent(row) {
      if(row.type===0){
        window.open(this.$router.resolve({name: 'content', query: {'contentId': row.id}}).href, '_blank');
      }else if(row===1){
        window.open(row.url, '_blank');
      }
    },
    getContentList() {
      this.$http({
        url: this.$http.adornUrl('/mh/content/page'),
        method: 'get',
        params: this.$http.adornParams({
          'categoryIdListStr': this.categoryIdListStr,
          'categoryType': this.categoryType,
          'pageNumber': this.pageIndex,
          'pageSize': this.pageSize,
          'title':this.title
        })
      }).then(({data}) => {
        if (data.list) {
          this.contentList = data.list
          this.totalPage = data.total
        } else {
          this.contentList = []
          this.totalPage = 0
        }
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getContentList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getContentList()
    },

  }
}
</script>

<style scoped>

.btnGb1 {
  background-color: #BF1108;
  color: #fff;
}

.btnGb2 {
  background-color: #ddd;
}


</style>

